<template>
  <section class="list_filter">
    <el-row type="flex" class="filter_item">
      <!-- 价格 -->
      <el-col :span="5">
        <el-row class="price_title" type="flex" justify="space-between">
          <span>价格</span>
          <span>0-{{ filterQuery.price }}</span>
        </el-row>
        <el-slider
          @change="handlePriceChange"
          v-model="filterQuery.price"
          :max="4000"
        ></el-slider>
      </el-col>

      <!-- 住宿等级 -->
      <el-col :span="4">
        <div class="item_title">住宿等级</div>
        <el-dropdown placement="bottom-start">
          <span class="el-dropdown-link">
            <span>{{ levelChoose }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <el-dropdown-menu slot="dropdown" v-if="hotelOptions">
            <el-dropdown-item
              @click.native="item.check = !item.check"
              style="width: 100px"
              v-for="item in hotelOptions.levels"
              :key="item.id"
            >
              <!-- iconright-1  选中样式 -->
              <i
                :class="item.check ? 'iconright-1' : 'iconcircle'"
                class="iconfont"
              ></i>
              <span>{{ item.name }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>

      <!-- 住宿类型 -->
      <el-col :span="4">
        <div class="item_title">住宿类型</div>
        <el-dropdown>
          <span class="el-dropdown-link">
            <span>{{ typeChoose }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <el-dropdown-menu slot="dropdown" v-if="hotelOptions">
            <el-dropdown-item
              @click.native="item.check = !item.check"
              style="width: 150px"
              v-for="item in hotelOptions.types"
              :key="item.id"
            >
              <!-- iconright-1  选中样式 -->
              <i
                :class="item.check ? 'iconright-1' : 'iconcircle'"
                class="iconfont"
              ></i>
              <span>{{ item.name }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>

      <!-- 酒店设施 -->
      <el-col :span="4">
        <div class="item_title">酒店设施</div>
        <el-dropdown>
          <span class="el-dropdown-link">
            <span>{{ assetsChoose }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <el-dropdown-menu slot="dropdown" v-if="hotelOptions">
            <el-dropdown-item
              @click.native="item.check = !item.check"
              style="width: 150px"
              v-for="item in hotelOptions.assets"
              :key="item.id"
            >
              <!-- iconright-1  选中样式 -->
              <i
                :class="item.check ? 'iconright-1' : 'iconcircle'"
                class="iconfont"
              ></i>
              <span>{{ item.name }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>

      <!-- 酒店品牌 -->
      <el-col :span="4">
        <div class="item_title">酒店品牌</div>
        <el-dropdown>
          <span class="el-dropdown-link">
            <span>{{ brandsChoose }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <el-dropdown-menu slot="dropdown" v-if="hotelOptions">
            <div
              class="el-dropdown-menu-box"
              style="overflow: auto; max-height: 250px"
            >
              <el-dropdown-item
                @click.native="item.check = !item.check"
                style="width: 170px"
                v-for="item in hotelOptions.brands"
                :key="item.id"
              >
                <!-- iconright-1  选中样式 -->
                <i
                  :class="item.check ? 'iconright-1' : 'iconcircle'"
                  class="iconfont"
                ></i>
                <span>{{ item.name }}</span>
              </el-dropdown-item>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>

      <!-- 撤销条件 -->
      <el-col :span="3" class="cancel_filter">
        <el-button @click="cancelFilter" type="primary">撤销条件</el-button>
      </el-col>
    </el-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
      // 筛选参数
      filterQuery: {
        // 价格
        price: 4000,
        // 住宿等级、
        hotellevel: [],
        // 住宿类型、
        hoteltype: [],
        // 酒店设施、
        assets: [],
        // 酒店品牌、
        brands: []
      },
      // 酒店筛选项
      hotelOptions: null,
      // 控制撤销条件请求次数
      cancelFlag: false
    };
  },

  methods: {
    //   获取酒店筛选选项
    async getHotelOption() {
      const { data } = await this.$axios.get("/hotels/options");

      //  处理数据,将每一项配置中添加是否被选中属性
      let result = {};
      for (const key in data.data) {
        result[key] = data.data[key].map(item => ({
          ...item,
          check: false
        }));
      }
      // console.log(result);
      this.hotelOptions = result;
    },

    // 价格改变事件
    handlePriceChange(val) {
      console.log(val);
      // 将价格信息传递给父组件
      this.$emit("filter-event", this.filterQuery);
    },

    // 取消筛选条件
    cancelFilter() {
      this.cancelFlag = true;
      this.filterQuery.price = 4000;
      // 重新获取酒店配置项即可
      this.getHotelOption();
      this.$emit("filter-event", {
        price: 4000,
        hotellevel: [],
        hoteltype: [],
        assets: [],
        brands: []
      });
      setTimeout(() => {
        this.cancelFlag = false;
      }, 1000);
    },
    // 向首页传递过滤参数
    sendFilterQuery() {
      if (this.cancelFlag) {
        return;
      }
      this.$emit("filter-event", this.filterQuery);
    }
  },

  computed: {
    // 等级下拉选择标签说明
    levelChoose() {
      if (this.filterQuery.hotellevel.length === 0) return "不限";
      if (this.filterQuery.hotellevel.length === 1)
        return this.filterQuery.hotellevel[0].name;
      return `已选${this.filterQuery.hotellevel.length}项`;
    },

    // 类型下拉选择标签说明
    typeChoose() {
      if (this.filterQuery.hoteltype.length === 0) return "不限";
      if (this.filterQuery.hoteltype.length === 1)
        return this.filterQuery.hoteltype[0].name;
      return `已选${this.filterQuery.hoteltype.length}项`;
    },

    // 酒店设施选择标签说明
    assetsChoose() {
      if (this.filterQuery.assets.length === 0) return "不限";
      if (this.filterQuery.assets.length === 1)
        return this.filterQuery.assets[0].name;
      return `已选${this.filterQuery.assets.length}项`;
    },

    // 酒店品牌选择标签说明
    brandsChoose() {
      if (this.filterQuery.brands.length === 0) return "不限";
      if (this.filterQuery.brands.length === 1)
        return this.filterQuery.brands[0].name;
      return `已选${this.filterQuery.brands.length}项`;
    }
  },

  watch: {
    // 深度监听住宿等级是否选中状态
    "hotelOptions.levels": {
      deep: true,
      handler(val) {
        // 筛选选中的等级
        this.filterQuery.hotellevel = this.hotelOptions.levels.filter(
          item => item.check
        );
        // 将过滤信息传递给父组件
        // this.$emit("filter-event", this.filterQuery);
        // 优化后的代码，每次筛选条件都是要向父组件发出事件，所以可以把该事件封装
        this.sendFilterQuery();
      }
    },

    // 深度监听住宿类型是否选中状态
    "hotelOptions.types": {
      deep: true,
      handler() {
        // 筛选选中的等级
        this.filterQuery.hoteltype = this.hotelOptions.types.filter(
          item => item.check
        );
        // console.log(this.filterQuery.hoteltype);
        // 将过滤信息传递给父组件
        // this.$emit("filter-event", this.filterQuery);
        this.sendFilterQuery();
      }
    },

    // 深度监听酒店设施是否选中状态
    "hotelOptions.assets": {
      deep: true,
      handler() {
        // 筛选选中的等级
        this.filterQuery.assets = this.hotelOptions.assets.filter(
          item => item.check
        );
        // console.log(this.filterQuery.assets);
        // 将过滤信息传递给父组件
        // this.$emit("filter-event", this.filterQuery);
        this.sendFilterQuery();
      }
    },

    // 深度监听酒店品牌是否选中状态
    "hotelOptions.brands": {
      deep: true,
      handler() {
        // 筛选选中的等级
        this.filterQuery.brands = this.hotelOptions.brands.filter(
          item => item.check
        );
        // console.log(this.filterQuery.brands);
        // 将过滤信息传递给父组件
        // this.$emit("filter-event", this.filterQuery);
        this.sendFilterQuery();
      }
    }
  },

  created() {
    //   挂载数据
    this.getHotelOption();
  }
};
</script>

<style lang="less" scoped>
.list_filter {
  border: 1px solid #ddd;
  padding: 5px 20px;
  color: #666;

  .filter_item .el-col {
    border-right: 1px solid #ddd;
    padding: 5px 20px;

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      border-right: none;
      padding-right: 0;
    }

    .price_title {
      font-size: 14px;
      color: #666;
    }

    .item_title {
      font-size: 14px;
      color: #666;
    }

    .el-dropdown {
      display: flex;
      height: 38px;

      .el-dropdown-link {
        display: flex;
        width: 100%;
        flex: 1;
        cursor: pointer;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  .cancel_filter {
    display: flex;
    align-items: center;
  }
}
</style>
